<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V-model Test</title>
</head>
<body>
    <div id="app1">
        <input type="text" v-model="message1" placeholder="输入...">
        <p>input输入的内容是：{{ message1 }}</p>
    </div>
    <br>
    <p>-----------------------------华丽的分割线-----------------------------</p>
    <div id="app2">
        <textarea type="text" v-model="text" placeholder="输入..."></textarea>
        <p>textarea输入的内容是：</p>
        <p style="white-space: pre">{{ text }}</p>
    </div>
    <br>
    <p>-----------------------------华丽的分割线-----------------------------</p>
    <div id="app3">
        <input type="text" @input="handleInput" placeholder="输入...">
        <p>input输入的内容是：{{ message2 }}</p>
    </div>
    <br>
    <p>-----------------------------华丽的分割线-----------------------------</p>
    <div id="app4">
        <input type="text" v-model.lazy="message">
        <p>{{ message }}</p>
    </div>
    <br>
    <p>-----------------------------华丽的分割线-----------------------------</p>
    <div id="app5">
        <input type="number" v-model.number="message">
        <p>{{ typeof message }}</p>
    </div>
    <br>
    <p>-----------------------------华丽的分割线-----------------------------</p>
    <div id="app6">
        <input type="text" v-model.trim="message">
        <p>{{ message }}</p>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var app1 = new Vue({
            el: '#app1',
            data: {
                message1: ''
            }
        });
        var app2 = new Vue({
            el: '#app2',
            data: {
                text: ''
            }
        });
        var app3 = new Vue({
            el: '#app3',
            data: {
                message2: ''
            },
            methods: {
                handleInput: function (e) {
                    this.message2 = e.target.value;
                }
            }
        });
        var app4 = new Vue({
            el: '#app4',
            data: {
                message: ''
            }
        });
        var app5 = new Vue({
            el: '#app5',
            data: {
                message: 123
            }
        });
        var app6 = new Vue({
            el: '#app6',
            data: {
                message: ''
            }
        })
    </script>
</body>
</html>